<template>
  <div class="go2buy">
    <ball-header :leftArrow="false" title="在线支付" :border="false" z-index="5">
      <div slot="left" @click="$router.back(-1)"><van-icon name="arrow-left" size="24" color="#000000" /></div>
    </ball-header>
    <div class="ball">
      <div class="title">{{orderDetail.product_info.title}}</div>
      <div class="info acea-row row-column">
        <div class="acea-row row-middle">
          <span class="t1">打球时间</span>
          <span class="t2">{{moment(orderDetail.play_time*1000).format("YYYY年MM月DD日") }}</span>
        </div>
        <div class="acea-row row-middle">
          <span class="t1">打球人数</span>
          <span class="t2">{{orderDetail.player_num}}人</span>
        </div>
      </div>
      <div class="price acea-row row-middle">
        <span class="t1">支付总额</span>
        <span class="t2">￥{{orderDetail.pay_price}}</span>
      </div>
      <div class="title">支付方式</div>
      <van-radio-group v-model="payType">
        <van-cell-group>
          <van-cell center title="微信支付" label="推荐微信用户使用" clickable @click="payType = '1'">
            <template slot="icon">
              <van-icon name="wechat" size="26" color="#4fc08d" style="margin-right:10px" class="search-icon" />
            </template>
            <template slot="right-icon">
              <van-radio name="1" />
            </template>
          </van-cell>
          <!-- <van-cell title="单选框 2" clickable @click="payType = '2'">
            <template slot="right-icon">
              <van-radio name="2" />
            </template>
          </van-cell> -->
        </van-cell-group>
      </van-radio-group>
    </div>
    <div class="btn" @click="go2buy">立即支付</div>
  </div>
</template>

<script>
import ballHeader from 'components/header'
import api from 'api'
import moment from 'moment'
import { Dialog, Toast } from 'vant'
import config from 'api/config.js'
import Vue from 'vue'

Vue.use(Dialog)

export default {
  components:{
    ballHeader
  },
  data() {
    return {
      routerUrl:config.routerUrl,
      order_id:"",
      payType:'1', 
      moment,
      orderDetail:{
        product_info:{}
      }
    }
  },
  created() {
    // Toast("created")
  },
  activated() {
    let order_id = this.$route.params.order_id
    this.order_id = order_id
    this.init()
    console.log("activated")
  },
  methods: {
    init(){
      let status = this.$route.query.status
      let order_id = this.$route.params.order_id
      this.getOrder()
      if(status == 1){
        Dialog.confirm({
          title: '确认微信支付是否已完成',
          confirmButtonText:'已完成',
          cancelButtonText:'未支付',
          closeOnPopstate:false
        }).then(() => {
          this.$store.commit("common/setOrderFromType",-1)
          this.$router.push(this.routerUrl+"/orderdetail/"+order_id)
        })
      }
    },
    go2buy(){
      Toast.loading("支付中...")
      let order_id = this.$route.params.order_id
      api.get("/pay/unifiedOrder",{order_id}).then(e=>{
        Toast.clear()
        window.location.href = e.data.h5_url
      })
    },
    getOrder(){
      let order_id = this.$route.params.order_id
      // Dialog.close()
      api.get("/order/orderDetail",{order_id}).then(e=>{
        this.orderDetail = e.data    
        // if(e.data.paid == 1){ // 支付成功
        //   Toast.success({
        //     message:"已支付",
        //     duration:600
        //   })
        //   setTimeout(()=>{
        //     this.$store.commit("common/setOrderFromType",-1)
        //     this.$router.push(this.routerUrl+"/orderdetail/"+order_id)
        //   },600)
        // }
      })
    }
  },
}
</script>

<style scoped>
  .go2buy{
    min-height: 100vh;
    background-color: #f2f3f5;
  }
  .go2buy .ball{
  }
  .go2buy .ball .title{
    margin-top: 20px;
    height: 80px;
    padding: 0 20px;
    font-size: 26px;
    line-height: 80px;
    background-color: #ffffff;
  }
  .go2buy .ball .info{
    margin-top: 4px;
    padding: 40px 20px 40px 60px;
    background-color: #ffffff;
    font-size: 26px;
  }
  .go2buy .ball .info .acea-row{
    margin-bottom: 20px;
  }
  .go2buy .ball .info .acea-row:last-of-type{
    margin-bottom: 0;
  }
  .go2buy .ball .info .t1{

  }
  .go2buy .ball .info .t2{
    margin-left: 30px;
    color: #888888;
  }
  .go2buy .ball .price{
    margin-top: 4px;
    height: 80px;
    padding: 0 20px 0 60px;
    background-color: #ffffff;
  }
  .go2buy .ball .price .t2{
    margin-left: 30px;
    color: #ff6600;
  }
  .go2buy .btn{
    width: 80%;
    margin: 40px auto 0;
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #ffffff;
    background-color: #ff6600;
    border-radius: 40px;
  }
</style>